<!--
 * @Description: 智慧城市环境监测项目
 * @Author: rendc
 * @Date: 2025-11-18 11:40:17
 * @LastEditors: rendc
 * @LastEditTime: 2025-11-19 11:03:11
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>智慧城市环境监测项目</title>
  <script src="./js/echarts.js"></script>
  <style>
    /* 清除默认样式 */
    * {
        margin: 0;
        padding: 0;
    }
    /* 页面整体样式 */
    .main { 
        /* border: 1px solid red; */
        width: 100vw;
        height: 100vh;
        /* background-image: url("./assets/layout/container_bg.png"); */
        /* 背景图片不重复 */
        background-repeat: no-repeat;
        /* 调整背景图片位置 */
        background-position: center;
        background-size: cover;
    }
    .header { 
      /* border: 1px solid red; */
      height: 8%;
      min-height: 45px;
      background-image: url("./assets/layout/header.png");
      /* 背景图片不重复 */
      background-repeat: no-repeat;
      /* 调整背景图片位置 */
      background-position: 0 0;
      background-size: cover;
      color: white;
      text-align: center;
      font-size: 25px;
    }
    .content { 
      /* border: 1px solid red; */
      height: calc(92% + 30px);
      margin-top: -30px;
    }
    .rowOne{
      height: calc(2 / 3 * 100%);
      /* border: 1px solid red; */
    }
    .rowOneLeft,.rowOneRight{
      width: calc(25%);
      height: 100%;
      /* border: 1px solid red; */
    }
    .rowOneLeft{
      float: left;
    }
    .rowOneLeftUp,.rowOneLeftDown{
      width: 100%;
      height: calc(50%);
      /* border: 1px solid red; */
    }
    .rowOneCenter{
      float: left;
      width: calc(50%);
      height: 100%;
      /* border: 1px solid red; */
    }
    .rowOneRight{
      float: right;
    }
    .rowTwo{
      /* height: 33.33%; */
      /* height: calc(1 / 3 * 100%); */
      /* border: 1px solid red; */
    }
    /* 图表模块 样式 */
    .chartDiv{
      /* border: 1px solid red; */
      width: 100%;
      height: 100%;
      min-width: 250px;
      min-height: 280px;
      background-image: url("./assets/layout/chart_box_bg.png");
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size: 100% 100%;
    }
    .chartDivTitle::before{
      content: '';
      display: inline-block;
      width: 30px;
      height: 30px;
      background-image: url("./assets/icons/box_title_icon.png");
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size: 100% 100%;
      vertical-align: middle;
    }
    .chartDivTitle{
      color: white;
      color: black;
      /* text-align: center; */
      font-size: 25px;
      font-weight: bold;
    }
    .chartDivChart{ 
      /* border: 1px solid red; */
      width: 100%;
      height: calc(100% - 30px);
    }
  </style>
</head>
<body>
  <!-- 智慧城市环境监测项目 -->
  <div class="main">
    <div class="header">智慧城市环境监测</div>
    <div class="content">
      <!-- 第一行 -->
      <div class="rowOne">
        <div class="rowOneLeft">
          <div class="rowOneLeftUp">
            <div class="chartDiv">
              <div class="chartDivTitle">双十一各类衣服销量</div>
              <div id="chartOne" class="chartDivChart">
                图表
              </div>
            </div>
          </div>
          <div class="rowOneLeftDown">
            <div class="chartDiv">
              <div class="chartDivTitle">双十一各类衣服销量</div>
              <div id="chartOne" class="chartDivChart">
                图表
              </div>
            </div>
          </div>
        </div>
        <div class="rowOneCenter">中</div>
        <div class="rowOneRight">右</div>
      </div>
      <div class="rowTwo">
        <!-- <div class="rowTwoLeft">左</div>
        <div class="rowTwoCenter">中</div>
        <div class="rowTwoRight">右</div> -->
      </div>
    </div>
  </div>
  <script>
    var chartOne = document.getElementById('chartOne');
    var myChart = echarts.init(chartOne);
    var option = {
      title: {
        // text: '双十一各类衣服销量',
        // left: 'center',// 设置标题位置
      },
      tooltip: {
        trigger: 'item',
      },
      // 图例
      legend: {
        type: 'scroll',
        top:0,
      },
      series: [
        {
          name: '销量',
          // 折线图
          type: 'pie', 
          // 设置饼的大小
          radius: '50%',
      data: [
          {name:'衬衫',value:5},
          {name:'羊毛衫',value:10},
          {name:'雪纺衫',value:25},
          {name:'裤子',value:15},
          {name:'高跟鞋',value:55},
          {name:'袜子',value:55},
          ]
        }
      ]
    };
    myChart.setOption(option);
    // 监听窗口大小变化
    window.onresize = function () {
      // 实时调整图表大小
      // 注意：当窗口太小会影响页面布局
      myChart.resize();
    }
    // 请求数据 实时渲染
  </script>
</body>
</html>